<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
	<title>天天生鲜-购物车</title>
	<link rel="stylesheet" type="text/css" href="/static/css/reset.css">
	<link rel="stylesheet" type="text/css" href="/static/css/main.css">
	<script src="/static/js/jquery-1.12.4.min.js"></script>
</head>
<body>
	<div class="header_con">
		<div class="header">
			<div class="welcome fl">欢迎来到天天生鲜!</div>
			<div class="fr">
				{% if user.is_authenticated %}
				<div class="login_btn fl">
					欢迎您：<em>{{user.username}}</em>
					<a href="{% url 'user:logout' %}">登出</a>
				</div>
				{% else %}
				<div class="login_btn fl">
					<a href="{% url 'user:login' %}">登录</a>
					<span>|</span>
					<a href="{% url 'user:register' %}">注册</a>
				</div>
				{% endif %}
				<div class="user_link fl">
					<span>|</span>
					<a href="{% url 'goods:index' %}">首页</a>
					<span>|</span>
					<a href="{% url 'user:user' %}">用户中心</a>
					<span>|</span>
					<a href="{% url 'cart:index' %}">我的购物车</a>
					<span>|</span>
					<a href="{% url 'user:order' 1 %}">我的订单</a>
				</div>
			</div>
		</div>		
	</div>

	<div class="search_bar clearfix">
		<a href="{% url 'cart:index' %}" class="logo fl"><img src="/static/images/logo.png"></a>
		<div class="sub_page_name fl">|&nbsp;&nbsp;&nbsp;&nbsp;购物车</div>
		<div class="search_con fr">
			<form method="get" action="/search">
				<input type="text" class="input_text fl" name="q" placeholder="搜索商品">
				<input type="submit" class="input_btn fr" name="" value="搜索">
			</form>
		</div>
	</div>

	<div class="total_count">全部商品<em>{{count}}</em>件</div>
	<ul class="cart_list_th clearfix">
		<li class="col01">商品名称</li>
		<li class="col02">商品单位</li>
		<li class="col03">商品价格</li>
		<li class="col04">数量</li>
		<li class="col05">小计</li>
		<li class="col06">操作</li>
	</ul>
	<form method="post" action="{% url 'order:place' %}" go="place">
	{% csrf_token %}
	{% for sku in skus %}
	<ul class="cart_list_td clearfix" sku_id="{{sku.good_sku.id}}">
		<li class="col01"><input type="checkbox" name="sku_ids" checked value="{{sku.good_sku.id}}"></li>
		<li class="col02"><img src="{{sku.good_sku.image.url}}"></li>
		<li class="col03">{{sku.good_sku.name}}<br><em>{{sku.good_sku.price}}元/{{sku.good_sku.unite}}</em></li>
		<li class="col04">{{sku.good_sku.unite}}</li>
		<li class="col05">{{sku.good_sku.price}}元</li>
		<li class="col06">
			<div class="num_add">
				<a href="javascript:;" class="add fl">+</a>
				<input type="text" class="num_show fl" value="{{sku.count}}">
				<a href="javascript:;" class="minus fl">-</a>	
			</div>
		</li>
		<li class="col07">{{sku.amount}}元</li>
		<li class="col08"><a href="javascript:;">删除</a></li>
	</ul>
	{% endfor %}

	<ul class="settlements">
		<li class="col01"><input type="checkbox" name="" checked=""></li>
		<li class="col02">全选</li>
		<li class="col03">合计(不含运费)：<span>¥</span><em>0.00</em><br>共计<b>0</b>件商品</li>
		<li class="col04"><a href="javascript:;" onclick="$('form[go=\'place\']').submit();">去结算</a></li>
	</ul>
	</form>

	<div class="footer">
		<div class="foot_link">
			<a href="#">关于我们</a>
			<span>|</span>
			<a href="#">联系我们</a>
			<span>|</span>
			<a href="#">招聘人才</a>
			<span>|</span>
			<a href="#">友情链接</a>		
		</div>
		<p>CopyRight © 2016 北京天天生鲜信息技术有限公司 All Rights Reserved</p>
		<p>电话：010-****888    京ICP备*******8号</p>
	</div>
	<script>
		function update_price(that){
			//更新点击商品的小计
			var price=$(that).parents("li").prev().text();

			var num=$(that).parents("li").find(".num_show").val();
			num=parseInt(num);

			//var reg=/\d+\.\d{2}/g;
			//var res=price.match(reg);
			price=parseFloat(price);
			var total=price*num;
			$(that).parents("li").next().text(total.toFixed(2)+"元");

		}

		function update_total(){
			//更新合计
			var price_total=0;
			var count_total=0;
			$("input:checked").parents("ul").find(".col07").each(function(index){
				var price1=$(this).text();
				var count1=$(this).prev().find(".num_show").val();
				count1=parseInt(count1);
				var reg1=/\d+\.\d{2}/g;
				var res1=price1.match(reg1);
				price1=parseFloat(res1);
				count_total+=count1;
				price_total+=price1;
			});
				$(".settlements .col03 em").text(price_total.toFixed(2));
				$(".settlements .col03 b").text(count_total.toFixed(2));
			}

		function update_cart(sku_id,count){
			var token=$("input[name='csrfmiddlewaretoken']").val();
			var params={
				"csrfmiddlewaretoken":token,
				"sku_id":sku_id,
				"count":count
			}

			var is_update=false;
			$.ajaxSetup({
				"async":false //同步请求
			});
			$.post("/cart/update",params,function(res){
				if(res.res==5){
					//更新成功
					is_update=true
				}else{
					is_update=false;
					alert(res.errmsg)
				}
			});
			$.ajaxSetup({
				"async":true //异步请求
			});

			return is_update;
		}

		$(function(){
			update_total();
			$(".add").click(function(e){
				var num=$(this).next().val();
				num=parseInt(num);
				num++;
				if(num<=0){
					num=0;
				}
				var sku_id=$(this).parents("ul").attr("sku_id");
				is_update=update_cart(sku_id,num);
				if(is_update){
					$(this).next().val(num);
					update_price(this);
					update_total();
				}else{
					$(this).next().val(focus_num);
				}
			});

			$(".minus").click(function(e){
				var num=$(this).prev().val();
				num=parseInt(num);
				num--;
				if(num<=0){
					num=0;
				}

				var sku_id=$(this).parents("ul").attr("sku_id");
				is_update=update_cart(sku_id,num);
				if(is_update){
					$(this).prev().val(num);
					update_price(this);
					update_total();
				}else{
					$(this).prev().val(focus_num);
				}
			});

			$(".cart_list_td").find("input[type='checkbox']").click(function(e){
				len1=$(".cart_list_td").length;
				len2=$(".cart_list_td").find(":checkbox:checked").length;
				if(len1>len2){
					$(".settlements li input").prop("checked",false);
				}else{
					$(".settlements li input").prop("checked",true);
				}
				update_total();
			});

		focus_num=0;
		$(".num_show").focus(function(e){
			focus_num=$(this).val();
			focus_num=parseInt(focus_num);
		});

		$(".num_show").blur(function(e){
			var num=$(this).val();
			if(isNaN(num)||num.trim().length==0||parseInt(num)<=0){
				$(this).val(focus_num);
				return;
			}
			var sku_id=$(this).parents("ul").attr("sku_id");
			is_update=update_cart(sku_id,num);

			if(is_update){
				$(this).val(num);
				update_price(this);
				update_total();
			}else{
				$(this).val(focus_num);
			}
		});

		$(".settlements li input").click(function(e){
			var is_checked=$(this).prop("checked");
			$("input[type='checkbox']").prop("checked",is_checked);
			update_total();

		});

        $(".cart_list_td .col08 a").click(function(e){
            var sku_id=$(this).parents("ul").attr("sku_id");
            var token=$("input[name='csrfmiddlewaretoken']").val();
            var that=this;
            $.post("/cart/del",{
                "sku_id":sku_id,
                "csrfmiddlewaretoken":token
            },function(res){
                if(res.res==4){
                    //console.log($(that).parents("ul"),that,this);
                    $(that).parents("ul").remove();
                    update_total();
                }else{
                    alert(res.errmsg);
                }
            });
        });


	});




	</script>
</body>
</html>